<template>
    <div class="page-container-padding">
      <!-- 查询条件 -->
      <div>
        <!-- 查询条件一 -->
        <el-select v-model="role" size="mini">
          <el-option value="0" label="全部" />
          <el-option value="252" label="研究员" />
          <el-option value="251" label="资管支持人员" />
          <el-option value="254" label="投资经理" />
          <el-option value="253" label="投资咨询人员" />
          <el-option value="255" label="开发人员" />
          <el-option value="247" label="公募基金" />
          <el-option value="249" label="业务人员" />
          <el-option value="250" label="客户" />
        </el-select>
        <!-- 查询条件二 -->
        <el-select v-model="active" size="mini">
          <el-option value="0" label="全部" />
          <el-option value="1" label="有效" />
          <el-option value="-1" label="无效" />
        </el-select>
        <el-button
          style="margin-left: 6px"
          type="primary"
          size="mini"
          :loading="dataLoading"
          @click="getInfos"
        >
          查询
        </el-button>
        <el-button
          style="margin-left: 6px"
          size="mini"
          :loading="dataLoading"
          @click="toExportFile"
        >
          导出Excel
        </el-button>
      </div>
      <!-- 表格显示 -->
      <div style="margin-top: 8px">
        <el-table border stripe :data="infoList">
          <el-table-column prop="admin_name" label="姓名" width="85px" />
          <el-table-column prop="phone" label="联系电话" width="120px" />
          <el-table-column prop="join_date" label="入司日期" width="100px" />
          <el-table-column
            prop="certificate1_date"
            label="从业证通过日"
            width="110px"
          />
          <el-table-column
            prop="certificate2_date"
            label="咨询证通过日"
            width="110px"
          />
          <el-table-column prop="join_duration" label="入司年限" width="130px" />
          <el-table-column prop="school" label="毕业院校" show-overflow-tooltip />
          <el-table-column
            prop="qualification"
            label="学历学位"
            show-overflow-tooltip
          />
          <el-table-column
            prop="office_location"
            label="办公地点"
            show-overflow-tooltip
          />
          <el-table-column prop="department" label="部门" show-overflow-tooltip />
          <el-table-column prop="group_name" label="小组" show-overflow-tooltip />
          <el-table-column
            prop="position_name"
            label="职位"
            show-overflow-tooltip
          />
          <el-table-column
            prop="work_area"
            label="负责领域"
            show-overflow-tooltip
          />
          <el-table-column label="资格证书" width="100px">
            <template #default="scope">
              <el-popover
                v-if="scope.row.certificate && scope.row.certificate.length > 0"
                trigger="hover"
                placement="top"
              >
                <p v-for="cft in scope.row.certificate" :key="cft.date">
                  {{ cft.date }} {{ cft.name }} {{ cft.code }}
                </p>
                <div slot="reference" style="color: #40a9ff; cursor: pointer" @click="ShowCet(scope.row.certificate)">
                  证书列表
                </div>
              </el-popover>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column label="获奖情况" width="100px">
            <template #default="scope">
              <el-popover
                v-if="scope.row.prizes && scope.row.prizes.length > 0"
                trigger="hover"
                placement="top"
              >
                <p v-for="cft in scope.row.prizes" :key="cft.date">
                  {{ cft.date }} {{ cft.name }}
                </p>
                <div slot="reference" style="color: #e6a23c; cursor: pointer" @click="ShowPrizes(scope.row.prizes)">
                  获奖情况
                </div>
              </el-popover>
              <div v-else>无</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 预览证书列表的窗口 -->
      <el-dialog
        v-if='ShowCetButton'
        :visible.sync="ShowCetButton"
        :title="'证书列表'"
        :close-on-click-modal="false"
        width="45%"
        top="7%"
        >  
        <div v-for="cft in this.DialogParam" :key="cft.date" style="font-size: large; margin: 10px; margin-left: 20px;">
          {{ cft.date }}
          {{ cft.name }}
          {{ cft.code }}
        </div>
      </el-dialog>
      <!-- 预览获奖情况的窗口 -->
      <el-dialog
        v-if='ShowPrizesButton'
        :visible.sync="ShowPrizesButton"
        :title="'获奖情况'"
        :close-on-click-modal="false"
        width="45%"
        top="7%"
        >  
        <div v-for="prize in this.DialogParam" :key="prize.date" style="font-size: large; margin: 10px; margin-left: 20px;">
          {{ prize.date }}
          {{ prize.name }}
          {{ prize.code }}
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
    import { GetRoleUserInfos } from '@/api/systemManage/userInfo'
    export default {
      data() {
        return {
          role: "0",
          active: '0',
          infoList: [],
          dataLoading: false,

          ShowCetButton: false,
          ShowPrizesButton: false,
          DialogParam: [],
        }
      },
      mounted() {
        this.getInfos()
      },
      methods: {
        ShowCet(a) {
          this.DialogParam = a
          setTimeout(() => {
            this.ShowCetButton = true
            }, 200)
        },
        ShowPrizes(a) {
          this.DialogParam = a
          setTimeout(() => {
            this.ShowPrizesButton = true
            }, 200)
        },
        getInfos() {
          this.dataLoading = true
          GetRoleUserInfos(this.role, this.active).then((res) => {
            this.infoList = res.data
            this.dataLoading = false
          })
        },
  
        toExportFile() {
          this.dataLoading = true
          GetRoleUserInfos(this.role, this.active, 1).then((res) => {
            let a = document.createElement('a')
            a.href = res.data.file_url
            a.style.display = 'none'
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            this.dataLoading = false
          })
        },
      },
    }
  </script>
  <style scoped lang="scss"></style>
  